<script setup lang="ts">
import {getSpecialApi} from "@/api/home/special";
import {ref,onMounted} from "vue";


// 定义专题数据
const specialData = ref([]);

async function getSpecial() {
  const res = await getSpecialApi()
  if(res.msg == '操作成功'){
    specialData.value = res.result
  }
}
onMounted(() => {
  getSpecial()
})

</script>

<template>
  <div class="special-content">
    <div class="good-list-title">
      <div class="good-list-title-left">
        <h2>最新专题</h2>
      </div>
      <div class="good-list-title-right">
        <div class="gltr-type">

        </div>
        <div class="gltr-more">
          <span>查看全部</span>
          <i class="iconfont icon-xiangyou"></i>
        </div>
      </div>
    </div>
    <div class="special-list">
      <div class="special-item" v-for="(item, index) in specialData" :key="item.id">
        <div class="special-item-img">
          <img v-lazy-img="item.detailsUrl" />
          <div class="img-mask">
            <div class="img-mask-text">
              <p>{{item.title}}</p>
              <p>{{item.summary}}</p>
            </div>
            <div class="img-mask-price">
              <span>¥{{item.lowestPrice}}</span>
            </div>
          </div>
        </div>
        <div class="special-item-info">
          <div class="special-item-info-left">
            <div class="like">
              <i class="iconfont icon-xihuan"></i>
              <span>{{item.collectNum}}</span>
            </div>
            <div class="look">
              <i class="iconfont icon-chakan"></i>
              <span>{{item.viewNum}}</span>
            </div>
          </div>
          <div class="special-item-info-right">
            <div class="talk">
              <i class="iconfont icon-pinglun"></i>
              <span>{{ item.replyNum}}</span>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<style scoped>
.good-list-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3.3rem;
}

.good-list-title-left h2 {
  font-size: 2.6rem;
  font-weight: 400;
}

.good-list-title-right {
  display: flex;
  align-items: center;
  gap: 4.1rem;
}

.gltr-more {
  font-size: 1.33rem;
  color: #999;
  cursor: pointer;
}

.gltr-more:hover {
  color: var(--primary-color);
}

.special-list {
  display: flex;
  gap: 1.25rem;
}

.special-item-img {
  position: relative;
  width: 100%;
}

.special-item-img img {
  width: 100%;
}

.img-mask {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-image: linear-gradient(0deg, rgba(0, 0, 0, .8), transparent 85%);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.66rem;
  box-sizing: border-box;
}

.img-mask-text {
  width: 21rem;
 cursor: pointer;
}

.img-mask-text p:first-child {
  font-size: 1.833rem;
  color: #fff;
}

.img-mask-text p {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.img-mask-text p:last-child {
  color: #999;
  font-size: 1.58rem;
}

.img-mask-price span {
  display: inline-block;
  padding: 0.33rem 0.66rem;
  background-color: #fff;
  color: #cf4444;
  font-size: 1.4rem;
  cursor: pointer;
}

.special-item-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  padding: 1.66rem;
  box-sizing: border-box;
}

.special-item-info-left {
  display: flex;
  gap: 1.66rem;
}

.special-item-info span, special-item-info i {
  font-size: 1.33rem;
  color: #999;
  cursor: pointer;
}
</style>